﻿<{include file="header.htm"}>
<link href="<{$config.weburl}>/templates/default/css/space.css?t=<{$now_time}>" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" src="<{$config.weburl}>/templates/default/js/jquery.validate.js"></script>
<script type="text/javascript" src="<{$config.weburl}>/templates/default/js/jquery.cookie.js"></script>
<script type="text/javascript" src="<{$config.weburl}>/templates/default/js/slideTabs.js"></script>
        <div class="bigauto">
            <div class="width_1000">
                <div class="user_space_big">
                    <div class="register_con">
                        <div class="reg_left_con">
                            <div class="reg_slide_tab">
                                <div class="tabnav">
                                    <span class="on">账户注册</span>
                                </div>
                                <div class="tabcon">
                                    <form name="phoneform" method="post" id="phoneform" action="">
                                        <table width="720" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="165" height="50" align="right"><span class="title">邮箱地址：</span></td>
                                                <td width="255" height="50" align="left"><input type="text" name="email" placeholder="请输入邮箱地址" id="email" class="text"></td>
                                                <td width="300" height="50" align="left" class="hint"></td>
                                            </tr>
                                            <tr>
                                                <td width="165" height="50" align="right"><span class="title">手机号：</span></td>
                                                <td width="255" height="50" align="left"><input type="text" name="user" placeholder="请输入手机号" id="p_mobile" class="text"></td>
                                                <td width="300" height="50" align="left" class="hint"></td>
                                            </tr>
                                            <tr>
                                                <td height="50" align="right"><span class="title">登录密码：</span></td>
                                                <td height="50" align="left"><input type="password" name="password" placeholder="请输入登录密码" id="p_password" class="text"></td>
                                                <td height="50" align="left" class="hint"></td>
                                            </tr>
                                            <tr>
                                                <td height="30"></td>
                                                <td height="30">
                                                    <div class="password_cd">
                                                        <em>密码强度</em>
                                                        <div class="bx">
                                                            <span class="on"></span>
                                                            <span class="on"></span>
                                                            <span class=""></span>
                                                            <span class=""></span>
                                                            <span class=""></span>
                                                            <span class=""></span>
                                                        </div>
                                                        <b>弱</b>
                                                    </div>
                                                </td>
                                                <td height="30"></td>
                                            </tr>
                                            <tr>
                                                <td height="50" align="right"><span class="title">确认密码：</span></td>
                                                <td height="50" align="left"><input type="password" name="re_password" placeholder="请输入确认密码" id="p_repassword" class="text"></td>
                                                <td height="50" align="left" class="hint"></td>
                                            </tr>
                                            <tr>
                                                <td height="50" align="right"><span class="title">验证码：</span></td>
                                                <td height="50" align="right">
                                                    <input type="text" name="sms_code" id="sms_code" placeholder="请输入短信验证码" class="text length" />

                                                    <span style=" display: block; float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background:#e77817; color: #fff; font-size: 14px; margin-left: 5px; cursor: pointer;" id="sendCode">点击发送</span>
                                                </td>
                                                <td height="50" align="left" class="hint"><span class="hint-sub"></span></td>
                                            </tr>
                                            <tr>
                                                <td height="50">&nbsp;</td>
                                                <td height="50" colspan="2" align="left">
                                                    <input type="hidden" name="way" value="0"/>
                                                    <input type="button" class="register_btn" onclick="$('#phoneform').submit()" value="注 册"/></td>
                                            </tr>
                                            <tr>
                                                <td height="50">&nbsp;</td>
                                                <td  height="50"  colspan="2">
                                                    <p class="reg_txt">
                                                        <label class="checkbox">
                                                            <input type="checkbox" id="checkbox" name="checkbox" checked="checked">
                                                            <span>我已阅读并同意<a href="<{$config.weburl}>/help.php?action=detail&con_id=19" target="_blank">《海峡票务网会员服务条款》</a></span>
                                                        </label>
                                                    </p>
                                                </td>

                                            </tr>
                                        </table>
                                    </form>
                                </div>

                            </div>
                        </div>
                        <div class="reg_rig_con">
                            <dl>
                                <dt>已有帐号</dt>
                                <dd><a class="now_login" href="login.php">立即登录</a></dd>
                            </dl>
                            <!--<dl>-->
                                <!--<dt>其他方式登录</dt>-->
                                <!--<dd>-->
                                    <!--<{if $config.qq_connect==1}>-->
                                    <!--<a target="_blank" style="display: block; float: left; margin-right: 10px;" href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=<{$config.qq_app_id}>&redirect_uri=<{$config.weburl}>/login.php"><img src="<{$config.weburl}>/templates/default/images/fast_qq.png"   /> </a>-->
                                    <!--<{/if}>-->
                                    <!--<{if $config.sina_connect==1}>-->
                                    <!--<a href="<{$sina_login_url}>" style="display: block; float: left; " ><img src="<{$config.weburl}>/templates/default/images/fast_wb.png" /> </a>-->
                                    <!--<{/if}>-->
                                <!--</dd>-->
                            <!--</dl>-->
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

            </div>
        </div>
        <script>


            $(function() {
                $(".register_btn").on("click",function(){
                   var checked =  $("#checkbox").attr('checked');
                    if(checked == undefined){
                        alert("请勾选会员服务条款");
                        return false;
                    }
                });
               //发送短信
                $("#sendCode").on("click",function(){
                    var mobile = $("#p_mobile").val();
                    var mobile_part = /^1\d{10}$/;
                    if(mobile == ''){
                        alert("请填写手机号");
                        return false;
                    } else if(!mobile_part.test(mobile)){
                        alert("请填写正确的手机号");
                        return false;
                    } else {
                        if($(this).hasClass("on")){
                            return false;
                        }
                        $.post("ajax_back_end.php",{action:'sendSms',mobile:mobile},function(ret){
                            ret = eval('('+ret+')');
                            if(!ret.status){
                                alert(ret.msg);
                            } else {
                                settime(60);
                            }

                        });


                    }
                });

                    var countdown = 60;
                function settime(val) {
                    if (countdown == 0) {
                        $("#sendCode").removeClass("on");
                        $("#sendCode").html("点击发送");
                        return false;
                    } else {
                        $("#sendCode").html("重新发送" + countdown + 's');
                        countdown--;
                        $("#sendCode").addClass("on");
                    }
                    setTimeout(function() {
                        settime(val)
                    },1000)
                }

                /*手机注册验证开始*/
                jQuery.validator.addMethod("mobile", function(value, element) {
                    var pattern = /1[3-8]+\d{9}/;
                    return pattern.test(value);
                }, "请输入正确的手机号");
                $("#phoneform").validate({
                    rules: {
                        'email':{
                            required: true,
                            email: true,
                            remote: {
                                url: 'ajax_back_end.php',
                                type: 'post',
                                data:{
                                    verify_type: 'email',
                                    verify_field: function(){
                                        return $("#email").val();
                                    }
                                }
                            }
                        },
                        'user': {
                            required: true,
                            mobile: true,
                            remote: {
                                url: 'ajax_back_end.php',
                                type: 'post',
                                data:{
                                    verify_type: 'mobile',
                                    verify_field: function(){
                                        return $("#p_mobile").val();
                                    }
                                }
                            }
                        },
                        'password': {
                            required: true,
                            minlength: 6
                        },
                        're_password': {
                            required: true,
                            equalTo: '#p_password'
                        },
                        'sms_code': {
                            required: true,
                        },

                    },
                    messages: {
                        'email':{
                            required:'邮箱不能为空',
                            email:'邮箱格式错误',
                            remote:'该邮箱已经被注册'
                        },
                        'password': {
                            required: '密码不能为空',
                            minlength: '密码不得小于6位'

                        },
                        're_password': {
                            required: '密码前后不一致',
                            equalTo: '密码前后不一致'
                        },
                        'user': {
                            required: '手机号不能为空',
                            remote: '该手机号已被注册'
                        },
                        'sms_code': {
                            required: '验证码不能为空',
                            remote: '验证码错误'
                        },


                    },
                    errorPlacement: function(error, element) {
                        if (element.is('#p_yzm'))
                        {
                            var hint_td = element.parents('td:first').siblings('.hint');
                            var hint_sub = hint_td.find('.hint-sub');
                            hint_sub.children().remove();
                            error.addClass('reg_tip reg_error');
                            hint_sub.append(error);
                        }
                        else {
                            var hint_td = $(element).parents('td:first').siblings('.hint');
                            hint_td.children().remove();
                            error.addClass('reg_tip reg_error');
                            hint_td.append(error);
                        }
                    },
                    success: function(msg, element) {
                        var jele = $(element);
                        if (jele.is('#p_yzm'))
                        {
                            var hint_td = jele.parents('td:first').siblings('.hint');
                            var hint_sub = hint_td.find('.hint-sub');
                            hint_sub.children().remove();
                            hint_sub.append('<span class="reg_tip reg_success"></span>');
                        }
                        else {
                            var hint_td = jele.parents('td:first').siblings('.hint');
                            hint_td.children().remove();
                            hint_td.append('<span class="reg_tip reg_success"></span>');
                        }
                        if (jele.is('#p_password'))
                        {
                            setPwdSafe('#phoneform', '#p_password');
                        }

                    },
                    onkeyup: function(element, event)
                    {
                        setPwdSafe('#phoneform', '#p_password');
                        $(element).valid();
                    }

                });





            })



            //密码强度
            function setPwdSafe(pselector, selector)
            {
                var pwd = $(pselector + ' ' + selector).val();
                var pattern_1 = /^[0-9]*$/i;
                var pattern_2 = /[a-z]+/i;
                //alert(pwd.length);
                if (pattern_1.test(pwd) && pwd.length < 8)
                {
                    // $(".safe strong").removeClass('on');
                    //  $(".safe strong.weak").addClass('on');

                    $(pselector + " .bx span").removeClass('on');
                    $(pselector + " .bx span:lt(2)").addClass('on');
                    $(pselector + " .password_cd b").text('弱');
                    return;
                }
                if (pattern_1.test(pwd) && pwd.length >= 8)
                {

                    $(pselector + " .bx span").removeClass('on');
                    $(pselector + " .bx span:lt(4)").addClass('on');
                    $(pselector + " .password_cd b").text('中');
                    return;
                }
                if (pattern_2.test(pwd) && pwd.length >= 6)
                {
                    $(pselector + " .bx span").removeClass('on');
                    $(pselector + " .bx span:lt(6)").addClass('on');
                    $(pselector + " .password_cd b").text('强');
                    return;
                }

                $(pselector + " .bx span").removeClass('on');
                $(pselector + " .bx span:lt(2)").addClass('on');
                $(pselector + " .password_cd b").text('弱');
            }
        </script>
<{include file="footer.htm"}>